---
import { getCollection } from "astro:content";
import Layout from "@layouts/Layout.astro";
import Footer from "@components/astro/UI/Footer.astro";
import LinkButton from "@components/astro/UI/LinkButton.astro";
import Hr from "@components/astro/UI/Hr.astro";
import Card from "@components/react/UI/Card";
import Socials from "@components/astro/UI/Socials.astro";
import getSortedPosts from "@utils/getSortedPosts";
import slugify from "@utils/slugify";
import { SOCIALS } from "@config";
const posts = await getCollection("blog");
const sortedPosts = getSortedPosts(posts);
const featuredPosts = sortedPosts.filter(({ data }) => data.featured);
const socialCount = SOCIALS.filter(social => social.active).length;
---

<script>

// import { registerMicroApps, 
//     // start
//  } from 'qiankun';

// registerMicroApps([
//   {
//     name: 'reactApp',
//     entry: {
//         scripts:["http://localhost:5173/apps/default/main.ts"]
//     },
//     container: '#editor-container',
//     activeRule: '/notes_astro3',
//   }
// ]);
// 启动 qiankun
// start();
</script>

<Layout>
  <main id="main-content">
    <section id="hero">
      <h1>前端探索</h1>
      <a
        target="_blank"
        href=`${import.meta.env.BASE_URL}/rss.xml`
        class="rss-link"
        aria-label="rss feed"
        title="RSS Feed"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="rss-icon"
          ><path
            d="M19 20.001C19 11.729 12.271 5 4 5v2c7.168 0 13 5.832 13 13.001h2z"
          ></path><path
            d="M12 20.001h2C14 14.486 9.514 10 4 10v2c4.411 0 8 3.589 8 8.001z"
          ></path><circle cx="6" cy="18" r="2"></circle>
        </svg>
      </a>

      <p>
        记录个人成长以及知识仓库<br/>
        <span class="text-sm opacity-50">穿插个人的一些技术探索，奇奇🥸怪怪🧠，可可☄️爱爱☃️</span>
      </p>
    
      {
        // only display if at least one social link is enabled
        socialCount > 0 && (
          <div class="social-wrapper">
            <div class="social-links">"社交账号":</div>
            <Socials />
          </div>
        )
      }
    </section>

    <Hr />

    {
      featuredPosts.length > 0 && (
        <>
          <section id="featured">
            <h2>feature</h2>
              <section class="hero-section">
        <div class="card-grid">
              {featuredPosts.map(({ data }) => (
                <Card client:load client:only="react"
                  href={`${import.meta.env.BASE_URL}/posts/${slugify(data)}`}
                  frontmatter={data}
                  secHeading={false}
                />
              ))}
             </div>
    </section>
          </section>
          <Hr />
        </>
      )
    }

    <section id="recent-posts">
      <h2>最近的文章</h2>
        <section class="hero-section">
        <div class="card-grid">
        {
          sortedPosts.map(
            ({ data }, index) =>
              index < 4 && (
                <Card client:load client:only="react"
                  href={`${import.meta.env.BASE_URL}/posts/${slugify(data)}`}
                  frontmatter={data}
                  secHeading={false}
                />
              )
          )
        }
    </div>
    </section>
      <div class="all-posts-btn-wrapper">
        <LinkButton href="/posts">
          所有文章
          <svg xmlns="http://www.w3.org/2000/svg"
            ><path
              d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"
            ></path>
          </svg>
        </LinkButton>
      </div>
    </section>
  </main>
  <div id="editor-container"></div>
  <Footer />
</Layout>



<style>
  /* ===== Hero Section ===== */
  #hero {
    @apply pb-6 pt-8;
  }
  #hero h1 {
    @apply my-4 inline-block text-3xl font-bold sm:my-8 sm:text-5xl;
  }
  #hero .rss-link {
    @apply mb-6;
  }
  #hero .rss-icon {
    @apply mb-2 h-6 w-6 scale-110 fill-skin-accent sm:mb-3 sm:scale-125;
  }
  #hero p {
    @apply my-2;
  }
  .social-wrapper {
    @apply mt-4 flex flex-col sm:flex-row sm:items-center;
  }
  .social-links {
    @apply mb-1 mr-2 whitespace-nowrap sm:mb-0;
  }

  /* ===== Featured & Recent Posts Sections ===== */
  #featured,
  #recent-posts {
    @apply pb-6 pt-12;
  }
  #featured h2,
  #recent-posts h2 {
    @apply text-2xl font-semibold tracking-wide;
  }
  .all-posts-btn-wrapper {
    @apply my-8 text-center;
  }
</style>
